<link href="<?php echo base_url('theme/css/frontend/search.css'); ?>" rel="stylesheet">
<script type="text/javascript">
    $(document).ready(function() {
        
    });
    function hideDetail(event_id) {
        $(".popup-detail").each(function() {
            if ($(this).attr('tag') == event_id) {
                $(this).hide();
            }
        });
    }
    function loadDetail(event_id) {
        $(".popup-detail").each(function() {
            if ($(this).attr('tag') == event_id) {
                if ($(this).css("display") !== "none") {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            } else {
                $(this).hide();
            }
        });
        $(".popup-comment").each(function() {
            $(this).hide();
        });
    }
    function cancelevent(id) {
        var r = confirm("Bạn có chắc chắn muốn huỷ sự kiện này?");
        if (r == true) {
            window.location = "/event/delete/" + $('input[name=id]').val();
        }
    }

    function join(event_id) {
        $.ajax({
            url: '/event/join/' + event_id,
            type: "POST",
            dataType: 'json',
            success: function(data) {
                if (typeof(data['error']) != "undefined") {
                    $("button[name=join][tag=" + event_id + "]").hide();
                    $("button[name=notjoin][tag=" + event_id + "]").hide();
                    $(".join-message[tag=" + event_id + "]").text(data['message']);
                } else {
                    $("button[name=join][tag=" + event_id + "]").hide();
                    $("button[name=notjoin][tag=" + event_id + "]").hide();
                    $(".join-message[tag=" + event_id + "]").text("Đăng ký tham gia thành công.");
                }
            }
        });
    }

    function notjoin(event_id) {
        $.ajax({
            url: '/event/notjoin/' + event_id,
            type: "POST",
            dataType: 'json',
            success: function(data) {
                if (typeof(data['error']) != "undefined") {
                    $("button[name=join][tag=" + event_id + "]").hide();
                    $("button[name=notjoin][tag=" + event_id + "]").hide();
                    $(".join-message[tag=" + event_id + "]").text(data['message']);
                } else {
                    $("button[name=join][tag=" + event_id + "]").hide();
                    $("button[name=notjoin][tag=" + event_id + "]").hide();
                    $(".join-message[tag=" + event_id + "]").text("Từ chối tham gia thành công.");
                }
            }
        });
    }

    function change(id, type) {
        if (type == 1) {
            window.location = "/event/company/" + id;
        } else if (type == 2) {
            window.location = "/event/booth/" + id;
        }
    }
    function loadComment(event_id) {
        $(".popup-comment").each(function() {
            if ($(this).attr('tag') == event_id) {
                if ($(this).css("display") !== "none") {
                    $(this).hide();
                } else {
                    $(this).show();
                }
            } else {
                $(this).hide();
            }
        });
        $(".popup-detail").each(function() {
            $(this).hide();
        });
    }
    function sendComment(user_id, event_id) {
        var key = window.event.keyCode;
        isShift = window.event.shiftKey ? true : false;
        // If the user has pressed only enter
        if (key == 13 && !isShift) {
            $('.comment-content').each(function() {
                if ($(this).attr('tag') == event_id) {
                    var comment = $(this).val();
                    $.ajax({
                        url: '/event/comment/' + user_id + '/' + event_id + '/' + comment,
                        type: "POST",
                        success: function(data) {
                            alert("Bình luận thành công!");
                            window.location = '/event/manage';
                        }
                    });
                }
            });
            $(".popup-comment").each(function() {
                if ($(this).attr('tag') == event_id) {
                    $(this).hide();
                }
            });
            $(".popup-detail").each(function() {
                if ($(this).attr('tag') == event_id) {
                    $(this).hide();
                }
            });
        }
    }
</script>
<?php if ($events): ?>
    <?php if (!isset($extra)): ?>
        <ul class="thumbnails items">
        <?php endif; ?>

        <?php
        $i = 0;
        foreach ($events as $event):
            ?>
            <?php if ($i == 0 || $i == 11): ?>
                <li style="width: 463px; height: 411px; <?php if ($i == 11): ?>float:right;<?php endif; ?>">
                    <a style="display:block; height:366px; position:relative;" onmouseout="hideDetail('<?php echo $event['id']; ?>');" onmouseover="loadDetail('<?php echo $event['id']; ?>');">
                        <img style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width: 460px; height: 366px;" src="<?php echo base_url($event['image']); ?>">
                    </a>
                    <div class="caption">
                        <div style="margin-top: 6px; border:1px dashed #C6C6C6"></div>
                        <h6><?php echo characterLimiter($event['name'], 64); ?></h6>
                        <div><?php echo characterLimiter($event['content'], 64); ?></div>
                        <div class="caption-right">
                            <div class="comment" onclick="loadComment('<?php echo $event['id']; ?>');">
                                <?php echo $event['count_comments']; ?>
                            </div>
                            <div class="detail" onclick="loadDetail('<?php echo $event['id']; ?>');">
                            </div>
                        </div>
                    </div>
                    <div class="popup-comment" tag="<?php echo $event['id']; ?>">
                        <div class="header">
                            <div class="name">
                                <b><?php echo $user['real_name']; ?></b> đang bình luận điều này
                            </div>
                            <div class="date">
                                <?php
                                date_default_timezone_set('Asia/Ho_Chi_Minh');
                                echo date("h:i - d/m/Y");
                                ?>
                            </div>
                        </div>
                        <div class="content">
                            <div class="avatar">
                                <?php if (isset($user['avatar'])) { ?>    
                                    <img src="<?php echo getAvatarLink($user['user_id'], $user['avatar']); ?> ">
                                <?php } ?>
                            </div>
                            <div class="input">
                                <textarea style="width:400px;" onkeydown="sendComment('<?php echo $user['user_id']; ?>', '<?php echo $event['id']; ?>')" class="comment-content" tag="<?php echo $event['id']; ?>" placeholder="Viết bình luận"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="popup-detail" tag="<?php echo $event['id']; ?>">
                        <div class="header">
                            <div class="name">
                                <b>Sự kiện diễn ra từ</b> <?php echo $event['day'] . ": " . $event['time_event']; ?>
                            </div>
                        </div>
                        <div class="content">
                            <div class="event">
                                <div class="event-content">
                                    <h4 style="margin-bottom: 30px;word-break: break-all;"><?php echo $event['name']; ?></h4>
                                    <p class="participation"><?php echo $event['count']; ?> người tham gia sự kiện</p>
                                    <p class="address"><?php echo $event['address']; ?></p>
                                    <?php if (isset($event['current_user']) && $event['current_user'] == 1) { ?>
                                        <div class="button">
                                            <button class="btn btn-primary btn-event-cancel" style="width:70px;" type="button" onclick="cancelevent(<?php echo $event['id']; ?>);">
                                                Huỷ
                                            </button>
                                            <button class="btn btn-primary btn-event" style="width:110px;" name="change" onclick="change(<?php echo $event['id'] . "," . $event['type']; ?>);" value="Sửa đổi">
                                                Sửa đổi
                                            </button>
                                        </div>
                                    <?php } else { ?>
                                        <?php if (isset($event['current_participation']) && $event['current_participation'] == 1) { ?>
                                            <div class="join-message">Bạn đã đăng ký tham gia sự kiện này.</div>
                                        <?php } else if (isset($event['current_not_participation']) && $event['current_not_participation'] == 1) { ?>
                                            <div class="join-message">Bạn đã từ chối tham gia sự kiện này.</div>
                                        <?php } else { ?>
                                            <div class="button"> 
                                                <button class="btn btn-primary btn-event-cancel" name="join" tag="<?php echo $event['id']; ?>" style="width:70px;" type="button" onclick="join(<?php echo $event['id']; ?>);">
                                                    Tham gia
                                                </button>
                                                <button class="btn btn-primary btn-event" name="notjoin" tag="<?php echo $event['id']; ?>" style="width:110px;" onclick="notjoin(<?php echo $event['id']; ?>);" value="Sửa đổi">
                                                    Không tham gia
                                                </button>
                                                <div class="join-message" tag="<?php echo $event['id']; ?>"></div>
                                            </div>
                                        <?php } ?>
                                    <?php } ?>
                                </div>
                                <div class="event-banner">
                                    <img src="<?php echo base_url($event['image']); ?>" />
                                </div>
                                <div class="event-read">
                                    <div class="textcontent">
                                        <?php echo nl2br(htmlspecialchars($event['content'])); ?>
                                    </div>
                                </div>
                            </div>
                            <div class="event-readmore">
                                <ul><li><a class="more" rel="eventPopup[ajax]" href="http://project2.lc/event/view/true/<?php echo $event['id']; ?>" data-url="/event/view/true/<?php echo $event['id']; ?>">Xem tiếp...</a></li></ul>
                            </div>
                            <div class="comment">
                                <div class="avatar">
                                    <?php if (isset($user['avatar'])) { ?>    
                                        <img src="<?php echo getAvatarLink($user['user_id'], $user['avatar']); ?> ">
                                    <?php } ?>
                                </div>
                                <div class="input">
                                    <textarea style="width:400px;" onkeydown="sendComment('<?php echo $user['user_id']; ?>', '<?php echo $event['id']; ?>')" class="comment-content" tag="<?php echo $event['id']; ?>" placeholder="Viết bình luận"></textarea>
                                </div>
                            </div>
                        </div>
                    </div> 
                </li>
            <?php else: ?>
                <li>
                    <a style="display:block; height:155px; position:relative;" onmouseout="hideDetail('<?php echo $event['id']; ?>');" onmouseover="loadDetail('<?php echo $event['id']; ?>');">
                        <img style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width: 460px; height: 155px;" src="<?php echo base_url($event['image']); ?>">
                    </a>
                    <div class="caption"> 
                        <div style="margin-top: 6px; border:1px dashed #C6C6C6"></div>
                        <h6><?php echo characterLimiter($event['name'], 30); ?></h6>
                        <div><?php echo characterLimiter($event['content'], 30); ?></div>
                        <div class="caption-right">
                            <div class="comment" onclick="loadComment('<?php echo $event['id']; ?>');">
                                <?php echo $event['count_comments']; ?>
                            </div>
                            <div class="detail" onclick="loadDetail('<?php echo $event['id']; ?>');">
                            </div>
                        </div>
                    </div>
                    <?php if ($i == 2 || $i == 4 || $i == 8) { ?>
                        <div class="popup-comment" style="margin-left:-239px;" tag="<?php echo $event['id']; ?>">
                        <?php } else { ?>
                            <div class="popup-comment" tag="<?php echo $event['id']; ?>">
                            <?php } ?>
                            <div class="header">
                                <div class="name">
                                    <b><?php echo $user['real_name']; ?></b> đang bình luận điều này
                                </div>
                                <div class="date">
                                    <?php
                                    date_default_timezone_set('Asia/Ho_Chi_Minh');
                                    echo date("h:i - d/m/Y");
                                    ?>
                                </div>
                            </div>
                            <div class="content">
                                <div class="avatar">
                                    <?php if (isset($user['avatar'])) { ?>    
                                        <img src="<?php echo getAvatarLink($user['user_id'], $user['avatar']); ?> ">
                                    <?php } ?>
                                </div>
                                <div class="input">
                                    <textarea style="width:400px;" onkeydown="sendComment('<?php echo $user['user_id']; ?>', '<?php echo $event['id']; ?>')" class="comment-content" tag="<?php echo $event['id']; ?>" placeholder="Viết bình luận"></textarea>
                                </div>
                            </div>
                        </div>
                        <?php if ($i == 2 || $i == 4 || $i == 8) { ?>
                            <div class="popup-detail" style="margin-left:-239px;" tag="<?php echo $event['id']; ?>">
                            <?php } else { ?>
                                <div class="popup-detail" tag="<?php echo $event['id']; ?>">
                                <?php } ?>
                                <div class="header">
                                    <div class="name">
                                        <b>Sự kiện diễn ra từ</b> <?php echo $event['day'] . ": " . $event['time_event']; ?>
                                    </div>
                                </div>
                                <div class="content">
                                    <div class="event">
                                        <div class="event-content">
                                            <h4 style="margin-bottom: 30px;word-break: break-all;"><?php echo $event['name']; ?></h4>
                                            <p class="participation"><?php echo $event['count']; ?> người tham gia sự kiện</p>
                                            <p class="address"><?php echo $event['address']; ?></p>
                                            <?php if (isset($event['current_user']) && $event['current_user'] == 1) { ?>
                                                <div class="button">
                                                    <button class="btn btn-primary btn-event-cancel" style="width:70px;" type="button" onclick="cancelevent(<?php echo $event['id']; ?>);">
                                                        Huỷ
                                                    </button>
                                                    <button class="btn btn-primary btn-event" style="width:110px;" name="change" onclick="change(<?php echo $event['id'] . "," . $event['type']; ?>);" value="Sửa đổi">
                                                        Sửa đổi
                                                    </button>
                                                </div>
                                            <?php } else { ?>
                                                <?php if (isset($event['current_participation']) && $event['current_participation'] == 1) { ?>
                                                    <div class="join-message">Bạn đã đăng ký tham gia sự kiện này.</div>
                                                <?php } else if (isset($event['current_not_participation']) && $event['current_not_participation'] == 1) { ?>
                                                    <div class="join-message">Bạn đã từ chối tham gia sự kiện này.</div>
                                                <?php } else { ?>
                                                    <div class="button"> 
                                                        <button class="btn btn-primary btn-event-cancel" name="join" tag="<?php echo $event['id']; ?>" style="width:70px;" type="button" onclick="join(<?php echo $event['id']; ?>);">
                                                            Tham gia
                                                        </button>
                                                        <button class="btn btn-primary btn-event" name="notjoin" tag="<?php echo $event['id']; ?>" style="width:110px;" onclick="notjoin(<?php echo $event['id']; ?>);" value="Sửa đổi">
                                                            Không tham gia
                                                        </button>
                                                        <div class="join-message" tag="<?php echo $event['id']; ?>"></div>
                                                    </div>
                                                <?php } ?>
                                            <?php } ?>
                                        </div>
                                        <div class="event-banner">
                                            <img src="<?php echo base_url($event['image']); ?>" />
                                        </div>
                                        <div class="event-read">
                                            <div class="textcontent">
                                                <?php echo nl2br(htmlspecialchars($event['content'])); ?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="event-readmore">
                                        <ul><li><a class="more" rel="eventPopup[ajax]" href="http://project2.lc/event/view/true/<?php echo $event['id']; ?>" data-url="/event/view/true/<?php echo $event['id']; ?>">Xem tiếp...</a></li></ul>
                                    </div>
                                    <div class="comment">
                                        <div class="avatar">
                                            <?php if (isset($user['avatar'])) { ?>    
                                                <img src="<?php echo getAvatarLink($user['user_id'], $user['avatar']); ?> ">
                                            <?php } ?>
                                        </div>
                                        <div class="input">
                                            <textarea style="width:400px;" onkeydown="sendComment('<?php echo $user['user_id']; ?>', '<?php echo $event['id']; ?>')" class="comment-content" tag="<?php echo $event['id']; ?>" placeholder="Viết bình luận"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                            </li>
                        <?php
                        endif;
                        $i++
                        ?>
                    <?php endforeach; ?>

                    <?php if (!isset($extra)): ?>
                        </ul>
                        <script type="text/javascript">
        // Thanh cuộn load thêm nội dung
            $(document).ready(function() {
                // js.js
                eventPopup('event');
                var event_extra = 0;
                window.onscroll = function() {
                    scrollY = window.pageYOffset;
                    scrollMaxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                    if (scrollY == scrollMaxY) {
                        event_extra++; //s tăng lên một mỗi lần cuộn
                        var url = '<?php echo base_url('event/manage'); ?>';
                        var url = url + '/' + event_extra + '/true';
                        $.get(url, function(data) {
                            $('.items').append(data); // append to <ul>

                            // js.js
                            eventPopup();
                        });
                    }
                }; // end onscroll
            });
                        </script> 
                    <?php endif; ?>
                    <?php
                endif; // $companys ?>